<template>
<div id='box'>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check='false'
    >
      <van-cell v-for="data in dataList" :key="data.filmId" @click='navigate(data.filmId)'>
        <div class="poster">
          <img :src="data.poster" />
        </div>
        <div class="information">
          <div class="title">
            {{ data.name }}
          </div>
          <div class="content">
            <div :class='data.grade?"":"hidden"'>观众评分：<span style="color: #ffb232">{{data.grade}}</span></div>
            <div class="actors">
              主演： <span>{{ data.actors | actorsFilter }}</span>
            </div>
            <div class="nation">{{ data.nation }} | {{ data.runtime }}分钟</div>
          </div>
          <div class="buyBtn">
            <div class="buy">购票</div>
          </div>
        </div>
      </van-cell>
    </van-list>
</div>
</template>
<script>
import http from '@/util/http'
import Vue from 'vue'
import { mapState } from 'vuex'
Vue.filter('actorsFilter', (data) => {
  if (data === undefined) return '暂无主演'
  return data.map((item) => item.name).join(' ')
})
export default {
  data () {
    return {
      dataList: [],
      loading: false,
      finished: false,
      current: 1,
      total: 0
    }
  },
  computed: {
    ...mapState(['cityId'])
  },
  mounted () {
    http({
      url: `/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=1&k=7001419`,
      headers: {
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then((res) => {
      this.dataList = res.data.data.films
      this.total = res.data.data.total
    })
  },
  methods: {
    onLoad () {
      if (this.dataList.length === this.total && this.total !== 0) {
        this.finished = true
      }
      this.current++
      http({
        url: `/gateway?cityId=${this.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=7001419`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then((res) => {
        this.dataList = [...this.dataList, ...res.data.data.films]
        this.loading = false
      })
    },
    navigate (id) {
      this.$router.push(`/detail/${id}`)
    }
  }
}
</script>
<style lang='scss' scoped>
.hidden {
  visibility: hidden;
}
.van-list{
  padding-bottom: 49px;
  background: white;
  width: 100%;
  .van-cell {
    height: 124px;
    padding: 15px;
    position: relative;
    .poster {
      width: 66px;
      float: left;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .information {
      width: 60%;
      float: left;
      padding-left: 10px;
      .title {
        font-size: 16px;
      }
      .content {
        font-size: 13px;
        color: gray;
        .actors {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .buyBtn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        border: 1px solid #ff5f16;
        padding: 0 10px;
        border-radius: 4px;
        color: #ff5f16;
        font-size: 13px;
      }
    }
  }
}
</style>
